class BaseCircle {
  constructor(options) {
    this.x = options.x || 0
    this.y = options.y || 0
    this.innerRadius = options.innerRadius
    this.outerRadius = options.outerRadius
    this.text = options.text || 'text'
    this.innerStyle = options.innerStyle || 'red'
    this.outerStyle = options.outerStyle || 'blue'

    this.group = new Konva.Group({
      x: this.x,
      y: this.y,
    })

    // 內部圆
    const innerCircle = new Konva.Circle({
      x: 0,
      y: 0,
      radius: this.innerRadius,
      fill: this.innerStyle,
    })

    // 内部圆的圆环
    const innerRing = new Konva.Ring({
      x: 0,
      y: 0,
      innerRadius: this.innerRadius,
      outerRadius: this.outerRadius,
      fill: this.outerStyle,
      opacity: 0.3,
    })

    // 内部圆的文字
    const innerText = new Konva.Text({
      x: 0 - this.outerRadius,
      y: -7,
      width: this.outerRadius * 2,
      align: 'center',
      text: this.text,
      fontSize: 17,
      fontFamily: '微软雅黑',
      fontStyle: 'bold',
      fill: '#ffffff',
    })

    this.group.add(innerCircle)
    this.group.add(innerRing)
    this.group.add(innerText)
  }

  // 将元素添加到层
  addToGroupOrLayer(arg) {
    arg.add(this.group)
  }
}
